import ContentBox from '../../component/ContentBox';
import './style.css';
import AlertComponet from '../../component/Alert';
import { useState, useEffect } from 'react';
import chanliang from '../../assets/chanliang.png';
import chanzhi from '../../assets/chanzhi.png';
import { CloseOutlined } from '@ant-design/icons';
import { siteInfo, facilityList } from "../../api";
import titleImg from '../../assets/title-pic.png';
import CameraComponent from '../../component/Camera';
import { diva } from '../../global';
import Layout from '../../component/Layout';

const FaultPage = () => {
    const [index, setIndex] = useState(0);
    const a = 'rgba(37, 121, 133, 1)';
    const b = 'rgba(31, 75, 85, 1)';
    const [showJumpUp, setJumpUp] = useState(false);
    const [intro, setIntro] = useState({})
    const [output, setOutput] = useState([])
    const [town, setTown] = useState([])
    const [riceInfo, setRiceInfo] = useState([])
    const [weatherInfo, setWeatherInfo] = useState([])
    const [weatherFirst, setWeatherFirst] = useState({})
    const [trueData, setTrueData] = useState({})
    const [yieldInfo, setYieldInfo] = useState([])
    const [facility, setFacility] = useState([])
    const [defaultPic, setDefaultPic] = useState("")
    const [facilityTitle, setFacilityTitle] = useState("")
    const titleChangeName = (val)=>{
    }
    const getSiteInfo = () => {
        siteInfo().then((res) => {
            setIntro(res.data.intro);
            setOutput(res.data.output_info);
            setTown(res.data.town_list);
            setRiceInfo(res.data.rice_info);
            setWeatherInfo(res.data.weather_info);
            setWeatherFirst(res.data.weather_first);
            setYieldInfo(res.data.yield_info);
            setTrueData(res.data.true_data)
        });
        facilityList({ page: 1, size: 8 }).then((res) => {
            setFacility(res.data.list);
            setIndex(res.data.list[0]['id']);
            setDefaultPic(res.data.list[0]['discover'])
            setFacilityTitle(res.data.list[0]['fistColumn'])
        })
    };
useEffect(()=>{
    town.unshift({
        id:0,
        intro:intro?.intro,
        title:intro?.name,
        pic:intro?.pic,
    })
},[town])
    const getGroupId = async () => {
        diva.client?.request('GetEntityIds', {
            group: "稻场总览/涂市镇点位"                           // 资源列表中从根目录开始的路径
        }).then(async (res) => {
            const modal = await diva.client?.getEntityById(res.result[0]);
            const modal2 = await diva.client?.getEntityById(res.result[1]);
            const listener = (event) => {
    setPicIndex(3);

                setIntro(town[3]);
                diva.client?.applyScene('单独区域涂市').then(() => {
                })
            }
            modal?.addEventListener('click', listener);
            modal2?.addEventListener('click', listener);
            return () => {
                modal?.removeEventListener('click', listener);
                modal2?.removeEventListener('click', listener);
            }
        })
            .catch((err) => console.log(err));
        diva.client?.request('GetEntityIds', {
            group: "稻场总览/李溪镇点位"                           // 资源列表中从根目录开始的路径
        }).then(async (res) => {
            const modal = await diva.client?.getEntityById(res.result[0]);
            const modal2 = await diva.client?.getEntityById(res.result[1]);

            const listener = (event) => {
                setIntro(town[4]);
                setPicIndex(4);

                diva.client?.applyScene('单独区域李溪镇').then(() => {
                })
                    .catch((err) => console.log(err))
            }
            modal?.addEventListener('click', listener);
            modal2?.addEventListener('click', listener);
            return () => {
                modal?.removeEventListener('click', listener);
                modal2?.removeEventListener('click', listener);
            }

        })
            .catch((err) => console.log(err))
        diva.client?.request('GetEntityIds', {
            group: "稻场总览/铜鼓镇点位"                           // 资源列表中从根目录开始的路径
        }).then(async (res) => {
            const modal = await diva.client?.getEntityById(res.result[0]);
            const modal2 = await diva.client?.getEntityById(res.result[1]);

            const listener = (event) => {
                setIntro(town[5]);
                setPicIndex(5);

                diva.client?.applyScene('单独区域铜鼓镇').then(() => {
                })
                    .catch((err) => console.log(err))
            }
            modal?.addEventListener('click', listener);
            modal2?.addEventListener('click', listener);
            return () => {
                modal?.removeEventListener('click', listener);
                modal2?.removeEventListener('click', listener);
            }
        })
            .catch((err) => console.log(err))
        diva.client?.request('GetEntityIds', {
            group: "稻场总览/花田乡点位"                           // 资源列表中从根目录开始的路径
        }).then(async (res) => {
            const modal = await diva.client?.getEntityById(res.result[0]);
            const modal2 = await diva.client?.getEntityById(res.result[1]);
            const listener = (event) => {
                setIntro(town[1]);

                setPicIndex(1);
                diva.client?.applyScene('单独区域花田乡').then(() => {
                })
                    .catch((err) => console.log(err))

            }
            modal?.addEventListener('click', listener);
            modal2?.addEventListener('click', listener);
            return () => {
                modal?.removeEventListener('click', listener);
                modal2?.removeEventListener('click', listener);
            }
        })
            .catch((err) => console.log(err))
        diva.client?.request('GetEntityIds', {
            group: "稻场总览/南腰界镇点位"                           // 资源列表中从根目录开始的路径
        }).then(async (res) => {
            const modal = await diva.client?.getEntityById(res.result[0]);
            const modal2 = await diva.client?.getEntityById(res.result[1]);

            const listener = (event) => {
                setIntro(town[2]);
                setPicIndex(2);

                diva.client?.applyScene('单独区域南腰界').then(() => {
                })
                    .catch((err) => console.log(err));
            }
            modal?.addEventListener('click', listener);
            modal2?.addEventListener('click', listener);
            return () => {
                modal?.removeEventListener('click', listener);
                modal2?.removeEventListener('click', listener);
            }
        })
            .catch((err) => console.log(err))
    }
const chilrenIndex = (e)=>{
 if(e===undefined) {
    setPicIndex(-1);
    getSiteInfo();
    getGroupId();

 }

}
const [picIndex,setPicIndex]=useState(-1);
const getPIcDetail = (e)=>{
    setIntro(town[e]);
}

    useEffect(() => {
        getSiteInfo();
        getGroupId();

    }, [])
    useEffect(()=>{
        console.log(picIndex, 'piccIndex');
          },[picIndex])

    return (
        <div>
            <Layout index={0}showIndex={chilrenIndex}/>


            {showJumpUp && (<div className="jumpUp-contain">
                <div className="jumpup-title">
                    <div className='jump-up-title'>
                        <img src={titleImg} />
                        <div>自媒体矩阵网红推流画面{facilityTitle}</div>
                    </div>

                    <div>
                        <CloseOutlined onClick={() => setJumpUp(false)} />
                    </div>
                </div>
                <div className="camera-detail">
                    <CameraComponent camera_id={index} />
                    {/*<img className='jumpUp-img' src={defaultPic} />*/}
                </div>
            </div>)}
            {!showJumpUp && (<div className="content-middle">
                <div>

                    <div className='middle-flex'>
                        <div
                            className="middle-container"
                        >
                            <div className="icon-and-text">
                                {facility.slice(0, 4).map((item, _index) => (
                                    <div className='single-detail' key={item.id} onClick={() => { setIndex(item.id); setDefaultPic(item.discover); setFacilityTitle(item.fistColumn) }} style={{ backgroundColor: index === item.id ? a : b }}>{item.pos}</div>

                                ))}
                            </div>
                            <div className="icon-and-text">
                                {facility.slice(-4).map((item, _index) => (
                                    <div className='single-detail' key={item.id} onClick={() => { setIndex(item.id); setDefaultPic(item.discover); setFacilityTitle(item.fistColumn) }} style={{ backgroundColor: index === item.id ? a : b }}>{item.pos}</div>

                                ))}

                            </div>
                            <div >
                                {/*<img src={defaultPic} className="middle-pic" style={{ width: 258 }} onClick={() => setJumpUp(true)} />*/}
                                <img src={defaultPic} className="middle-pic" onClick={() => setJumpUp(true)} />
                            </div>
                            <div className="link-right"></div>
                            <div className="produce-box">
                                <div className="produce-title"><img style={{ marginRight: 8 }} src={chanliang} />产量</div>
                                {yieldInfo.map((item, index) => (
                                    <div className="produce-content" key={index}>
                                        <div className="produce-current">{item.title}</div>
                                        <div className="produce-number" style={{paddingLeft:'10px'}}>{item.count}</div>
                                        <div className="produce-symbol" style={{paddingLeft:'10px'}}>{item.symbol}</div>

                                    </div>))}

                            </div>
                            <div className="produce-box">
                                <div className="produce-title"><img style={{ marginRight: 8 }} src={chanzhi} />产值</div>
                                {output.map((item, index) => (
                                    <div className="produce-content" key={index}>
                                        <div className="produce-current">{item.title}</div>

                                        <div className="produce-number" style={{paddingLeft:'10px'}}>{item.count}</div>
                                        <div className="produce-symbol" style={{paddingLeft:'10px'}}>{item.symbol}</div>

                                    </div>
                                ))}


                            </div>
                        </div>
                    </div>
                </div>
            </div>)}
            {!showJumpUp && (<AlertComponet />)}

            {!showJumpUp && (<div className='system-container'>
                <div className="content-left">
                    <ContentBox
                        getPIcDetail={getPIcDetail}
                        pic={intro?.pic}
                        title={intro?.name||intro?.title}  //title这里写成 title={tableInfo.title}
                        content={
                            intro?.intro
                        }
                        piccIndex={picIndex}
                        picText={town}
                        />
                </div>

                <div className="content-right">
                    <ContentBox title={'稻米数据'}
                        height={'256px'}
                        verticalInfo={riceInfo.slice(0, 3)}
                        verticalSecondInfo={riceInfo.slice(-3)}
                    />
                    <ContentBox title={'实时环境监测概况'}
                        line={true}
                        height={'342px'}

                        // verticalInfo={[{ title: '温度', count: '30°C' }, { title: '湿度', count: '56%' }, {title: 'PM2.5', count: '80'}, {title: 'PM10', count: '120'}]}
                        verticalInfo={trueData.infoZeroTab}
                        // infoFirstTab={[{ title: '空气质量', count: "优" }, { title: '噪音', count: "50DB" }]}
                        infoFirstTab={trueData.infoFirstTab}
                        // infoSecondTab={[{ title: '风向', count: '东南' }, { title: '风速', count: '1.5m/s' }]}
                        infoSecondTab={trueData.infoSecondTab}
                        // infoThirdTab={[{ title: '紫外线', count: '1级' }, { title: '空气湿度', count: '56%' }]}
                        infoThirdTab={trueData.infoThirdTab}
                    />
                    <ContentBox title={'气象监测'}
                        weather={weatherInfo}
                        weatherFirst={weatherFirst}
                        height={'309px'}


                    />

                </div>
            </div>)}




        </div>
    )
}
export default FaultPage;
